<template>
  <el-dialog
    append-to-body
    :title="info"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    align="left"
    v-loading="currLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    width="800px">
    <div v-if="orderDetail.order.id>0">
      <div style="width: 650px;">
        <product-item
          v-for="(product,index) in orderDetail.orderProductList"
          :key="index"
          :update-nums-call-back="updateProductSelectNums"
          :curr-product="{
              id:product.productId,
              price:product.productPrice,
              model:product.productModel,
              nums:product.productNums,
              name:product.productName,
              image:product.productImage,
            }" />
        <div class="c"></div>
      </div>
      <el-form ref="form" :model="form" label-width="80px" size="mini" style="margin-top: 20px">
        <el-form-item label="售后类型:">
          <el-select style="width: 60%;" v-model="form.type" placeholder="请选择 售后类型">
            <el-option :label="backItem.name" :value="backItem.key" v-for="(backItem,index) in typeArr"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退货金额:">
          <el-input style="width: 60%;" type="number" v-model="form.money" :max="orderDetail.order.price"></el-input>
        </el-form-item>
        <el-form-item label="退货理由:">
          <el-select style="width: 60%;" v-model="form.reason" placeholder="请选择 退货理由">
            <el-option :label="reason" :value="reason" v-for="(reason,index) in reasonArr" :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ProductItem from '../Common/ProductItem'
export default {
  name: 'SubmitSupplierOrderApplyDialog',
  components: {ProductItem},
  props:{
    successFunction:Function
  },
  data: function () {
    return {
      info:'供货单-提交退换货',
      typeArr: [
        {name: '退货', key: 0},
        {name: '换货', key: 1},
      ],
      // 货物-退回-类型
      backTypeArr: [
        {name: '退款+退货', key: 0},
        {name: '仅退款', key: 1},
        {name: '仅退货', key: 2},
      ],
      // 退回-物流-类型
      expressTypeArr: [
        {name: '快递', key: 0},
        {name: '自送店铺', key: 1},
      ],
      // 退货类型
      reasonArr: [
        '不想要了',
        '实物的外观,不太喜欢',
        '买多了,买错了',
        '临时不想要了',
        '太贵了',
      ],
      form:{
        type:0,
        money:0,
        reason:"不想要了",
      },
      dialogVisible: false,
      currLoading: false,
      orderDetail:{
        "orderProductList": [
          {
            "id": 1,
            "orderId": 1,
            "shopId": 7,
            "supplierId": 2,
            "productId": 8,
            "productName": "欧莱雅 紫熨斗眼霜",
            "productImage": "http://image.yangfankj.com/product/8/5/0.png",
            "productPrice": 145,
            "productModel": "常规",
            "productNums": 1,
            "score": null,
            "applyStatus": null,
            "applyType": null,
            "applyId": 0,
            "isComplete": 0,
            "commission": 0,
            "supplierProductStockId": 8
          },
          {
            "id": 2,
            "orderId": 1,
            "shopId": 7,
            "supplierId": 2,
            "productId": 9,
            "productName": "大宝 深透润肤霜",
            "productImage": "http://image.yangfankj.com/product/8/3/0.png",
            "productPrice": 110,
            "productModel": "常规",
            "productNums": 3,
            "score": null,
            "applyStatus": null,
            "applyType": null,
            "applyId": 0,
            "isComplete": 0,
            "commission": 0,
            "supplierProductStockId": 9
          },
          {
            "id": 3,
            "orderId": 1,
            "shopId": 7,
            "supplierId": 2,
            "productId": 10,
            "productName": "SK-II舒透洁面洗面奶",
            "productImage": "http://image.yangfankj.com/product/8/2/0.png",
            "productPrice": 89,
            "productModel": "常规",
            "productNums": 3,
            "score": null,
            "applyStatus": null,
            "applyType": null,
            "applyId": 0,
            "isComplete": 0,
            "commission": 0,
            "supplierProductStockId": 10
          }
        ],
        "order": {
          "id": 1,
          "orderNo": "202210141221224805",
          "status": {
            "name": "已收货",
            "id": 3
          },
          "shopId": 7,
          "shopLogo": "http://image.yangfankj.com/shop/logo/7.jpg",
          "shopName": "唐久便利",
          "supplierId": 2,
          "supplierLogo": "https://yangfan-shop.oss-cn-hangzhou.aliyuncs.com/supplier/logo/2.png",
          "supplierName": "科威批发",
          "productData": [],
          "productPrice": 742,
          "expressPrice": 50,
          "couponPrice": 0,
          "fullMinusPrice": 71,
          "shopDiscountPrice": 0,
          "price": 721,
          "sendType": {
            "name": "同城配送",
            "id": 1
          },
          "sendTime": "明天",
          "takeNumber": null,
          "payType": {
            "name": "账户余额-支付",
            "id": 0
          },
          "payTime": "2022-10-14 12:32:03",
          "couponId": 0,
          "cancelReason": null,
          "createdAt": "2022-10-14 12:21:22",
          "orderGroupId": null,
          "orderGroupStatus": null,
          "applyType": null,
          "applyStatus": null,
          "applyId": 0,
          "orderGroupEndTime": null,
          "info": "",
          "supplierOrderAddress": null,
          "productList": null,
          "isInvoice": {
            "name": "不需要",
            "id": 0
          },
          "invoiceFileUrl": "http://tsca-upload-file.cc/2022-10-09/f17816e6-eaee-423e-b6ff-518c282108cc.pdf"
        }
      },
      selectProductList:[]
    }
  },
  mounted () {
  },
  methods: {
    // 初始化退换货商品数量
    initSelectNums:function () {
      let $this=this
      this.orderDetail.orderProductList.forEach(function (value, index) {
        $this.selectProductList.push({
          id:value.productId,
          nums:value.productNums,
          model:value.productModel,
          supplierProductStockId:value.supplierProductStockId,
        })
      })
    },
    // 更新退换货商品数量
    updateProductSelectNums:function (id,nums) {
      let $this=this
      var currIndex=-1
      $this.selectProductList.forEach(function (value, index) {
        if (value.id===id){
          currIndex=index
        }
      })
      if (currIndex>-1){
        $this.$set($this.selectProductList,currIndex,{
          id:id,
          nums:nums,
          model:$this.selectProductList[currIndex].model,
          supplierProductStockId:$this.selectProductList[currIndex].supplierProductStockId,
        })
      }
    },
    // 打开弹窗
    open: function (orderDetail) {
      this.orderDetail=orderDetail
      this.form.money=orderDetail.order.price
      this.initSelectNums()
      this.dialogVisible = true
      this.$forceUpdate()
    },
    // 提交物流信息
    submit: function () {
      let $this = this
      var selectProductList=[]
      $this.selectProductList.forEach(function (value, index) {
        if (value.nums>0){
          selectProductList.push(value)
        }
      })
      if (selectProductList.length===0){
        return $this.$message.warning('退货数量必须大于: 0')
      }
      if ($this.form.money<=1){
        return $this.$message.warning('最小退款金额为: 1.00');
      }
      if ($this.form.money>$this.orderDetail.order.price){
        return $this.$message.warning('退款金额不能超过: '+$this.orderDetail.order.price);
      }
      var form={
        orderId:$this.orderDetail.order.id,
        orderProductNumsMapList:JSON.stringify(selectProductList),
        money:$this.form.money,
        type:$this.form.type,
        reason:$this.form.reason,
      }
      $this.MyRequest($this.ApiDoNameSupplier + 'SupplierOrderApply/submit', form, function (data) {
        $this.$message.success('提交成功!')
        $this.$props.successFunction()
        $this.dialogVisible=false
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
  }
}
</script>

<style scoped>

</style>
